${require('./_head.html') title="Forms" description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports." canonical="forms.html" } ${require('./_nav.html')}
${require('./_sidebar.html') active="forms-link"}

Forms

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

Inputs are width: 100%; by default. You can use .grid inside a form.

All natives form elements are fully customizable and themeable with CSS variables.

We'll never share your email with anyone else. 
<form>

  <!-- Grid -->
  <div class="grid">

    <!-- Markup example 1: input is inside label -->
    <label for="firstname">
      First name
      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
    </label>

    <label for="lastname">
      Last name
      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
    </label>

  </div>

  <!-- Markup example 2: input is after label -->
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="Email address" required>
  <small>We'll never share your email with anyone else.</small>

  <!-- Button -->
  <button type="submit">Submit</button>

</form>

Disabled and validation states:

<input type="text" placeholder="Valid" aria-invalid="false">
<input type="text" placeholder="Invalid" aria-invalid="true">
<input type="text" placeholder="Disabled" disabled>
<input type="text" value="Readonly" readonly>

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

Size 
<!-- Select -->
<label for="fruit">Fruit</label>
<select id="fruit" required>
  <option value="" selected>Select a fruit…</option>
  <option>…</option>
</select>

<!-- Radios -->
<fieldset>
  <legend>Size</legend>
  <label for="small">
    <input type="radio" id="small" name="size" value="small" checked>
    Small
  </label>
  <label for="medium">
    <input type="radio" id="medium" name="size" value="medium">
    Medium
  </label>
  <label for="large">
    <input type="radio" id="large" name="size" value="large">
    Large
  </label>
  <label for="extralarge">
    <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
    Extra Large
  </label>
</fieldset>

<!-- Checkboxes -->
<fieldset>
  <label for="terms">
    <input type="checkbox" id="terms" name="terms">
    I agree to the Terms and Conditions
  </label>
  <label for="terms_sharing">
    <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
    I agree to share my information with partners
  </label>
</fieldset>

<!-- Switches -->
<fieldset>
  <label for="switch">
    <input type="checkbox" id="switch" name="switch" role="switch">
    Publish on my profile
  </label>
  <label for="switch_disabled">
    <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch_disabled" disabled checked>
    User must change password at next logon
  </label>
</fieldset>

You can change a checkbox to an indeterminate state by setting the indeterminate property to true

<script>
  document.getElementById('indeterminate-checkbox').indeterminate = true;
</script>

Others input types:

${require('./_footer.html')}